<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>html语义化</title>
    <style>
        body{
            margin: 0;
            display: flex;
            flex-direction: column;
            height: 100vh;
        }

        header{
            height: 100px;

            background-color: cadetblue;
        }

        .body{
            background-color: cornsilk;
            flex: 1;

            display: flex;
        }

        aside{
            width: 200px;
            background-color: black;
        }

        main{
            flex: 1;
            background-color: darksalmon;
        }

        footer{
            height: 100px;
            background-color: darkgrey;
        }


    </style>
</head>

<body>

    <header>
        <div class="logo">测试</div>
        <nav></nav>
    </header>
    <div class="body">
        <aside></aside>
        <main></main>
    </div>

    <footer>

    </footer>


</body>

</html>